<template>
	<view class="invitationPage">
		<u-navbar @leftClick="goCustomNavBack" title=" " bgColor="transparent" :autoBack="true" leftIconColor="#fff">
		</u-navbar>
		<view class="inviteBg">
			<u--image src="/static/invitation/1.png" shape="square" mode="aspectFill" width="100vw" height="100vh">
			</u--image>
		</view>
		<view style="height: 75vh;"></view>
		<button class="inviteBtn" open-type="share">
			立即邀请
		</button>
		<view class="inviteTips">每邀请一位好友，即可赚{{inviteInfo.redeemPoints}}积分</view>
		<view class="inviteInfoContent">
			<view class="inviteInfoTitle">我的收益</view>
			<view class="inviteInfoDetailContent">
				<view class="inviteInfoDetail">
					<view class="item spItem">
						<view class="title">已邀请好友</view>
						<view class="number">{{inviteInfo.count||0}}
							<view class="unit">位</view>
						</view>
					</view>
					<view class="item spItem">
						<view class="title">已到账收益</view>
						<view class="number">{{inviteInfo.budge||0}}
							<view class="unit">积分</view>
						</view>
					</view>
					<view class="item">
						<view class="title">好友累计收益</view>
						<view class="number">{{inviteInfo.budge||0}}
							<view class="unit">积分</view>
						</view>
					</view>
				</view>
				<view class="inviteList">
					<u-empty mode="list" v-if="!inviteList.length && isLoad" text="暂无收益" icon="http://cdn.uviewui.com/uview/empty/list.png">
					</u-empty>
					<view v-for="(item,index) in inviteList" class="listItem" :key="index">
						<view class="headPic">
							<u--image  radius="74rpx" :src="item.headPic" shape="square" mode="aspectFill" width="74rpx" height="74rpx">
							</u--image>
						</view>
						<view class="infoContent">
							<view class="name">{{item.nickname}}</view>
							<view class="info">好友帮您赚了<view class="integral">{{item.integrals}}</view>积分</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inviteInfo: {
					redeemPoints: 0,
					budge: 0,
					count: 0,
				},
				userId: "",
				inviteList: [],
				isLoad:false,
				share:{
					imageUrl:"https://www.caoss.vip/invitation.png"
				}
			}
		},
		onLoad() {
			uni.getStorage({
				key: "userInfo",
				success: (userInfo) => {
					this.userId = userInfo.data.id;
					this.initData();
				}
			})
		},
		methods: {
			initData() {
				this.$request.get(this.$api.inviteList, {
					userId: this.userId,
					pageNo: 1,
					pageSize: 10000
				}).then(res => {
					this.inviteList = res.result.records;
					this.inviteInfo.count = res.result.total;
					this.inviteList.map(item => {
						this.inviteInfo.budge += item.integrals
					})
					this.isLoad = true;
					uni.hideLoading()
				})
				this.$request.get(this.$api.userTask, {
					userId: this.userId
				}).then(res => {
					res.result.dcckTaskConfigurationVos.map(item => {
						if (item.id === '1507688257381494786') {
							this.inviteInfo.redeemPoints = item.redeemPoints
						}
					})
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	.invitationPage {
		background: #FC3A21;

		.inviteBg {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;
			background: linear-gradient(to right, #fbc380, #fbad71);
			padding-top: 60rpx;
		}

		.inviteBtn {
			position: relative;
			z-index: 1;
			background: linear-gradient(180deg, #FBFAC1 0%, #FFC75D 100%);
			box-shadow: 0px 1px 0px 1rpx rgba(255, 255, 255, 0.82);
			border-radius: 27px 27px 27px 27px;
			color: #9D3A15FF;
			font-size: 46rpx;
			line-height: 88rpx;
			width: 600rpx;
			left: calc((100vw - 600rpx)/2);
			text-align: center;
		}

		.inviteTips {
			font-size: 28rpx;
			line-height: 80rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			z-index: 1;
			position: relative;
			text-align: center;
			opacity: 0.95;
		}

		.inviteInfoContent {
			z-index: 1;
			position: relative;
			padding: 0 20rpx;
			padding-bottom: 60rpx;

			.inviteInfoTitle {
				border-radius: 24rpx 24rpx 0 0;
				height: 106rpx;
				background: linear-gradient(180deg, #FCF4EE 0%, #FDE4D0 100%);
				text-align: center;
				color: #333333FF;
				font-size: 30rpx;
				line-height: 106rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
			}

			.inviteInfoDetailContent {
				border-radius: 0 0 24rpx 24rpx;
				padding: 20rpx 32rpx;
				background-color: #FDFAF1FF;

				.inviteInfoDetail {
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-around;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;
						width: calc(100% / 3);

						.title {
							color: #999999FF;
							font-size: 24rpx;
							font-family: PingFang SC-Light, PingFang SC;
							font-weight: 300;
							line-height: 40rpx;
						}

						.number {
							display: flex;
							justify-content: center;
							flex-wrap: nowrap;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #333333;
							font-size: 40rpx;
							line-height: 60rpx;

							.unit {
								font-size: 24rpx;
								position: relative;
								top: 4rpx;
								padding-left: 4rpx;
							}
						}
					}

					.spItem {
						position: relative;

						&::after {
							content: "";
							display: inline-block;
							height: 24rpx;
							width: 2rpx;
							background-color: #E8D9A7FF;
							position: absolute;
							right: 0;
							top: calc(50% - 12rpx);
						}
					}
				}
				.inviteList{
					display: flex;
					flex-direction: column;
					padding-top: 20rpx;
					.listItem{
						display: flex;
						flex-wrap: nowrap;
						justify-content: flex-start;
						align-items: center;
						padding: 10rpx 0rpx 16rpx 10rpx;
						.headPic{
							border: 1rpx solid #F7f7f7;
							border-radius: 50%;
						}
						.infoContent{
							display: flex;
							justify-content: space-between;
							flex-direction: column;
							padding-left:16rpx;
							.title{
								font-size: 28px;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;
								line-height: 40rpx;
							}
							.info{
								display: flex;
								justify-content: flex-start;
								font-size: 24rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
								.integral{
									color: #EC6C2F;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
